/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */

/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */

/* 颜色变量 */
@import "@/style/iconfont.wxss";
// 颜色
$color-title: #111115; // 主标题
$color-sub: #e5632b; // 副标题 主色调调的颜色
$color-subA: #fff; // 辅助标题 一般是灰色或者白色
$color-tip: #999999; // 辅助提示色
$color-bg: #fff; // 背景色
$color-line: #eeeeee; //分割线
$color-disabled: #cccccc; // 禁用色
$color-btn: #e5632b; //按钮颜色
$color-btnColor: #fff;
$graycolor:#9299a3; //灰色
//背景色
$bg-sub: #F8F6F9; //灰色
$color-red: #f63c32; //红色


// 文字
$font-size-base: 28rpx; // 14px，正文文字
$font-size-toolbar: 32rpx; // 16px，用于导航栏、标题
$font-size-sub: 26rpx; // 13px，副标题
$font-size-tag: 24rpx; // 12px，辅助性文字/大标签
$font-size-goods-tag: 22rpx; // 11px，商品列表角标
$font-size-activity-tag: 20rpx; // 10px，活动角标（拼团等角标）/小标签文字

$margin-both: 30rpx; //外边距 左右
$margin-updown: 20rpx; // 外边距 上下
$border-radius: 10rpx; //圆角
$padding: 25rpx; //内边距
view {
	font-family: PingFangSC-Medium, PingFang SC;
}
text {
	font-family: PingFangSC-Medium, PingFang SC;
}
@mixin base($baseColor, $baseHelpColor) {
	$base-color: $baseColor;
	$base-help-color: $baseHelpColor; //辅助颜色
	.color_write{
		color: #fff;
	}
	.color-base-text {
		color: $base-color !important;
	}
	.color-fff-bg{
		background-color: $bg-sub;
	}
	.graycolor{
		color: $graycolor;
	}
	.color-red{
		color: $color-red;
	}

	//背景色
	.color-base-bg {
		background-color: $base-color !important;
	}

	// 商品详情加入购物车背景色
	.color-join-cart {
		background-color: $base-help-color !important;
	}

	// 浅主色调背景
	.color-base-bg-light {
		background-color: lighten($base-color, 35%) !important;
	}

	.color-base-text-before {
		&::after,
		&::before {
			color: $base-color !important;
		}
	}

	.color-base-bg-before {
		&::after,
		&::before {
			background: $base-color !important;
		}
	}
	.font-bold{
		font-weight: bold;
	}
	//边框
	.color-base-border {
		border-color: $base-color !important;
		&-top {
			border-top-color: $base-color !important;
		}
		&-bottom {
			border-bottom-color: $base-color !important;
		}
		&-right {
			border-right-color: $base-color !important;
		}
		&-left {
			border-left-color: $base-color !important;
		}
	}
	
	//按钮
	button {
		width: 100%;
		height: 76rpx;
		display: block;
		font-size: $font-size-base;
		border-radius: 40rpx;
		line-height: 76rpx;
		background-color: $color-btn;
		color: $color-btnColor;
		-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
		&[type='primary'] {
			width: 100%;
			height: 64rpx;
			background-color: $color-btn;
			opacity: 1;
			line-height: 64rpx;
			border-radius: 8rpx;
			margin: 0 auto;
			font-size: 28rpx;
			color: #fff;
			&[plain] {
				background-color: $color-btn;
				color: $color-btnColor;
			}
		}
		&[type='default'] {
			width: 324rpx;
			height: 80rpx;
			background: $color-btn;
			opacity: 1;
			line-height: 80rpx;
			border-radius: 50rpx;
			// margin: 0 auto;
			font-size: 28rpx;
			color: #fff;
		}
		&[type='mini'] {
			width: 168rpx;
			height: 76rpx;
			background: linear-gradient(90deg, #3EB8FF 0%, #BC44FF 100%);
			opacity: 1;
			line-height: 76rpx;
			border-radius: 50rpx;
			margin: 0 auto;
			font-size: 28rpx;
			color: #fff;
			&[type='default'] {
				background-color: $color-btn;
				color: $color-btnColor;
			}
		}
		&.button-hover[type='primary'] {
			background-color: $color-btn;
			color: $color-btnColor ;
			&[plain] {
				background-color: $color-btn;
				color: $color-btnColor ;
			}
		}
		&.button-hover[type='default'] {
			background-color: $color-btn;
			color: $color-btnColor ;
			&[plain] {
				background-color: $color-btn;
				color: $color-btnColor ;
			}
		}

		&[disabled],
		&.disabled {
			background: $color-btn !important;
			color: $color-btnColor !important;
			border-color: $color-btn !important;
		}
	}

	.flex_b {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.flex_end {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.flex {
		display: flex;
		align-items: center;
	}
	.flex2{
		flex:2
	}
	
	.flex_c {
		// 上下分布的方法
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.flex_center {
		// 上下分布的方法
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.flex_a {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.flex_e {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
	}
	.bottom-mar {
		// 处理底部
		height: 30rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}
	.white {
		color: #fff !important;
	}
	.click-none {
		// 禁止鼠标点击
		pointer-events: none;
	}
	.grey {
		// 灰色
		color: #acacac !important;
	}
	.f-t {
		// 主色调的颜色
		color: $color-sub;
	}
	.noneList {
		// 为空
		text-align: center;
		margin: 50rpx auto;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #000;
	}
	.textC {
		text-align: center;
	}
	// 底部定位
	.bomPosition {
		z-index: 9999;
		background-color: #fff;
		padding: 20rpx;
		position: fixed;
		bottom: 0rpx;
		padding-bottom: env(safe-area-inset-bottom);
		width: 710rpx;
		border-top: 2rpx solid #dadbdc;
	}
	.modelBox {
		// 常用的盒子
		width: 668rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 25rpx;
		margin: 25rpx auto;
	}
	.hiddenSty {
		/*强制文本在一行内显示*/
		/* 第一步：让文字强制一行显示 */
		white-space: nowrap;
		/* 第二步：溢出隐藏 */
		overflow: hidden;
		/* 第三步：溢出的内容省略号显示 */
		text-overflow: ellipsis;
	}
	
}
